<template>
  <div class="basan-info-wrapper">
    <van-action-sheet v-model="isBasanInfoShow" @close="onBasanInfoClose">
      <div class="container" :style="containerStyle">
        <span class="name">{{ name }}</span>
        <van-image height="180" :src="fishImgSrc" />
        <div class="latlng">
          <span>{{ displayLatlng.lat }}</span>
          <span>{{ displayLatlng.lng }}</span>
        </div>
        <div
          v-for="oceanFeature in oceanFeatureList"
          :key="oceanFeature.name"
          class="ocean-feature"
        >
          <span>{{ oceanFeature.displayName }}:</span>
          <span>{{ getValue(oceanFeature) }}</span>
        </div>
        <van-button class="collect-btn" type="default" @click="onCollectBtnClick">收藏钓点</van-button>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import * as CONSTANTS from "@/config/constants.js";
import { mapGetters } from "vuex";
import { Mixin } from "@/utils/mixins/mixin.js";
import basanApi from "@/server/basan/basan.js";
import {
  convertOceanFeatureData,
  formatDisplayLatLng,
} from "@/utils/common.js";
import { PlatformEnv } from "@/config/config.js";

export default {
  name: "BasanInfo",
  mixins: [Mixin],
  data() {
    return {
      id: 11,
      latlng: {lat: 20, lng: 120},
      isBasanInfoShow: false,
      name: "金枪鱼",
      fishImgSrc: "static/imgs/huangqijinqiangyu.png",
      basan: {
        f1: "0.12 mg/m3",
        f2: "23.97 &deg;C",
        f3: "32.81 1/e3",
        f4: "0.53 m/s",
        f5: "-1987.000 m",
        f6: "5 m",
        f7: "1.2 m",
        f8: "0.12 mg/m3",
        f9: "23.97 &deg;C",
        f10: "2.9 m/s",
        f11: "0.00 m/s",
        f12: "196.84 mmol/m3",
        f13: "100808.40 Pa",
        groupid: 2,
      },
    };
  },
  computed: {
    ...mapGetters("oceanFeature", ["oceanFeatureList"]),
    displayLatlng() {
      return formatDisplayLatLng(this.latlng);
    },
    containerStyle() {
      return PlatformEnv.isWx ?  { padding: '12px 24px 92px 12px', maxHeight: '480px' } : {};
    }
  },
  methods: {
    show(id ,latlng) {
      this.id = id;
      this.latlng = latlng;
      this.queryBasanInfo();
      this.isBasanInfoShow = true;
    },
    onBasanInfoClose() {
      this.$bus.$emit(CONSTANTS.EventEnum.RESETCLICKEDBASAN);
    },
    async queryBasanInfo() {
      const result = await basanApi.fetchBasanInfo({ basanId: this.id });
      if (result.isOk) {
        this.basan = result.basan.properties;
        const fish = CONSTANTS.FishList.find(
          (fish) => fish.id == this.basan.groupid
        );

        if (fish) {
          this.name = fish.name;
          this.fishImgSrc = fish.imgSrc;
        }
      }
    },
    getValue(oceanFeature) {
      if (this.basan[oceanFeature.databaseField]) {
        return convertOceanFeatureData(
          oceanFeature,
          this.basan[oceanFeature.databaseField].split(" ")[0]
        );
      } else {
        return '0.00 ' + oceanFeature.unit;
      }
    },
    async onCollectBtnClick() {
      const result = await basanApi.addCollectedBasan({
        userId: this.$store.state.user.id,
        lat: this.latlng.lat,
        lng: this.latlng.lng,
      });
      if (!result.isOk) {
        this.$notify('收藏钓点失败');
        return;
      }
      this.$notify({ type: 'success', message: '收藏钓点成功' });
      this.$bus.$emit(CONSTANTS.EventEnum.COLLECTBASAN);
    }
  },
};
</script>
<style lang="less" scoped>
.basan-info-wrapper {
  .container {
    padding: 12px 24px;
    display: flex;
    flex-direction: column;

    .name {
      font-size: 20px;
      font-weight: bold;
      height: 28px;
      margin-bottom: 12px;
    }

    .latlng {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 12px 0;
      font-size: 20px;
      height: 28px;
      font-weight: bold;
    }

    .ocean-feature {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 8px;
      font-size: 16px;
      height: 19px;
    }

    .collect-btn {
      border-radius: 20px;
      font-size: 25px;
      background-color: rgba(0, 120, 255, 1);
      color: white;
      margin-top: 10px
    } 
  }
}
</style>